<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<body>
		<!--.整理今日内容(日报)
		3.补全今天12_练习.html代码
		 3.1
		全选/全不选
		反选
		是否选中全选
		
		3.2将数据渲染到页面table tbody中-->
		
		
		<!--作业改的不对！！-->
		
		<!--/*补全*/-->
		<div id="box">
			<div id="entry">
				<div id="user">
					<label>
						用户名:<input type="text" value="kky" placeholder="请输入姓名" />
					</label><br />
					<label>
						年龄:<input type="number" value=0 />
					</label>
				</div>
				<div id="sex">
					性别<br/>
					<label>
						男:<input type="radio" name="sex" value=0 checked />
					</label>	
					<label>
						女:<input type="radio" name="sex" value=1  />
					</label>
				</div>
				<div id="hobby">
					爱好:<br/>
					<label>
						学习 <input type="checkbox" value="h1" onclick="fn111()"/>
					</label>
					<label>
						健身 <input type="checkbox" value="h2" onclick="fn111()"/>
					</label>
					<label>
						游泳 <input type="checkbox" value="h3" onclick="fn111()"/>
					</label>
					<label>
						工作 <input type="checkbox" value="h4" onclick="fn111()"/>
					</label>
					<label>
						看电影 <input type="checkbox" value="h5" onclick="fn111()"/>
					</label>
					<div>
						<label>
							全选/全不选<input type="checkbox" id="checkAll" onclick="fn333(this)"/>
						</label>
						<button type="button" onclick="fn222()">反选</button>
					</div>
				</div>
				<div id="education">
					学历:<br />
					<select>
						<option value="e1">小学</option>
						<option value="e2">中学</option>
						<option value="e3">高中</option>
						<option value="e4">大学</option>
					</select>
				</div>
				<br />
				<div>
					<button type="button" onclick="add()">添加</button>
				</div>
			</div>
			<div id="show">
				<table id="tab">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>爱好</th>
							<th>操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
		<script>
			var arr=[];//用户存放数据
			
			//添加数据
			function add(){
				var userIpts=document.querySelectorAll("div#user>label input");
				//console.log("userIpts:",userIpts);
				var user=userIpts[0].value;
				var age=userIpts[1].value;
				var educationSleect=document.querySelector("#education>select")
				if(user&&age){
					var sex=getUserSex();
					console.log("sex:",sex);
					var hobby=getUserHobyy();
					var education=educationSleect.value;
					
					// console.log("user",user);;
					// console.log("age",age);
					// console.log("sex",sex);
					// console.log("hobby",hobby);
					var obj={
						id:+new Date(),
						user:user,
						age:age,
						sex:sex,
						hobby:hobby,
						education:education
					}
					
					arr.push(obj);
					console.log("最新数据:",arr);
					
				}else{
					alert("用户名和年龄不能为空");
				}
			}
			
			//获取用户输入的姓名和年龄
			function getUserSex(){
				var sexIpts=document.querySelectorAll("div#sex>label input");
				//console.log("sexIpts:",sexIpts);
				var sex;
				if(sexIpts[0].checked){
					sex=sexIpts[0].value;
				}else{
					sex=sexIpts[1].value;
				}
				return sex;
			}
			
			
			
			//获取用户的选取的爱好
			function getUserHobyy(){
				var hobbyIpts=document.querySelectorAll("div#hobby>label input[type='checkbox']");
				//console.log("hobbyIpts",hobbyIpts);
				var hobby=[];
				for(var i=0;i<hobbyIpts.length;i++){
					if(hobbyIpts[i].checked){
						hobby.push(hobbyIpts[i].value);
					}
				}
				return hobby;
			}
			function(){
				
			}
			
			//全选/全不选
		   function fn333(that){
			   //console.log("全选/全不选",that,"我自己是否被选中",that.checked);
			   var f=that.checked;//全选/全不选 的选中状态
			   var hobbyIpts=document.querySelectorAll("div#hobby label input[type='checkbox']");
			   for(var i=0;i<hobbyIpts.length;i++){
				   hobbyIpts[i].checked=f;
			   }
		   }
		    //是否需要选中  全选/全不选
		   function fn111(){
			   var checkAll=document.getElementById("checkAll");
			   var hobbyIpts=document.querySelectorAll("div#hobby label input[type='checkbox']");
			   var f=true;
			   
			   for(var i=0;i<hobbyIpts.length;i++){
				   if(! hobbyIpts[i].checked){
					   f=false;
					   break;
				   }
			   }
				checkAll.checked=f;
		   }
		   //反选
		   function fn222(){
			   var hobbyIpts=document.querySelectorAll("div#hobbyIpts label input[type='checkbox']");
			   for(var i=0;i<hobbyIpts.length;i++){
					
					hobbyIpts[i].checked = !hobbyIpts[i].checked;// !取反
					
			   }
		   
		</script>
	</body>
</html>